<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body,
    #renderContent {
      width: 100%;
      height: 100%;
    }

    #renderContent {
      display: flex;
      flex-direction: column;
      overflow: auto;
      background: #f3f5f9;
    }

    iframe {
      border: 0;
      display: block;
      flex: 1;
    }

    .bubbleContentHeader {
      padding: 16px 16px 20px 16px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
    }
  </style>
</head>

<body>
<div id="renderContent">
  <div class="bubbleContentHeader"></div>
  <iframe allow="camera *;microphone *;autoplay *;" frameborder="0"></iframe>
</div>
<script>


  // 只需要在下面更换appId和code即可
  // ----------------------------------------------------------------------------------
  const APP_ID = 'f220505e-0f83-41cb-abf6-233889e258e0'
  const APP_CODE = 'embedyPqNI5cXtT9BlMcdTrD0'
  // ----------------------------------------------------------------------------------


  !(function () {

    const isMobile = () => {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase());
    }


    const type = isMobile() ? '' : 'full'


    const renderUrl = `https://wx.baeapps.com/api/ai_apaas/v1/web_embed/html?type=${type}&app_id=${APP_ID}&code=${APP_CODE}`

    document.querySelector('iframe').src = renderUrl

  })()


</script>


</body>

</html>
